<div id="main1" style="width: 1200px;height: 500px"></div>
<script>
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    var emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    };
    option = {
        legend: {
            data: ['入库零件价值', '出库零件价值'],
            //规定图例位于距离左边的边框10%宽度的位置
            left: '10%'
        },
        dataZoom: [
            {
                type: 'inside'
            },
            {
                type: 'slider'
            }
        ],
        brush: {
            //右上角功能区
            toolbox: ['rect', 'polygon'],
            //
            xAxisIndex: 0
        },
        toolbox: {
            feature: {
                //
                magicType: {
                    type: ['stack']
                },
                dataView: {}
            }
        },
        tooltip: {
            formatter: '{c}'

        },
        xAxis: {
            axisPointer: {
                type: 'bar'
            },
            type: 'time',
        },
        yAxis: {
            name: '个数'
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: 70,
            containLabel: true
        },
        series: [
            {
                name: '入库零件价值',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: {{ add|tojson }}
            },
            {
                name: '出库零件价值',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: {{ reduce|tojson }}
            }
        ]
    };
    myChart.on('brushSelected', function (params) {
        var brushed = [];
        var brushComponent = params.batch[0];
        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex;
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
        }
        myChart.setOption({
            title: {
                backgroundColor: '#333',
                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                bottom: 0,
                right: '10%',
                width: 100,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            }
        });
    });

    option && myChart.setOption(option);
</script>


{#let xAxisData = ['1号', '2号', '3号', '4号'];#}
{#    let data1 = [['1956-01-01',3],['1957-01-02',3]];#}
{#    let data2 = [['1956-01-01',-6],['1957-01-02',-3]];#}
{#    var emphasisStyle = {#}
{#        itemStyle: {#}
{#            shadowBlur: 10,#}
{#            shadowColor: 'rgba(0,0,0,0.3)'#}
{#        }#}
{#    };#}
{#    option = {#}
{#        legend: {#}
{#            data: ['入库零件个数', '出库零件个数'],#}
{#            left: '10%'#}
{#        },#}
{#        brush: {#}
{#            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],#}
{#            xAxisIndex: 0#}
{#        },#}
{#        toolbox: {#}
{#            feature: {#}
{#                magicType: {#}
{#                    type: ['stack']#}
{#                },#}
{#                dataView: {}#}
{#            }#}
{#        },#}
{#        tooltip: {#}
{#                            formatter: '{c}'#}
{##}
{#                        },#}
{#        xAxis: {#}
{#            axisPointer: {#}
{#                        type: 'bar'#}
{#                    },#}
{#                    type: 'time',#}
{#        },#}
{#        yAxis: {#}
{#            name: '个数'#}
{#        },#}
{#        grid: {#}
{#            bottom: 100#}
{#        },#}
{#        series: [#}
{#            {#}
{#                name: '入库零件个数',#}
{#                type: 'bar',#}
{#                stack: 'one',#}
{#                emphasis: emphasisStyle,#}
{#                data: data1#}
{#            },#}
{#            {#}
{#                name: '出库零件个数',#}
{#                type: 'bar',#}
{#                stack: 'one',#}
{#                emphasis: emphasisStyle,#}
{#                data: data2#}
{#            }#}
{#        ]#}
{#    };#}
{#    myChart.on('brushSelected', function (params) {#}
{#        var brushed = [];#}
{#        var brushComponent = params.batch[0];#}
{#        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {#}
{#            var rawIndices = brushComponent.selected[sIdx].dataIndex;#}
{#            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));#}
{#        }#}
{#        myChart.setOption({#}
{#            title: {#}
{#                backgroundColor: '#333',#}
{#                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),#}
{#                bottom: 0,#}
{#                right: '10%',#}
{#                width: 100,#}
{#                textStyle: {#}
{#                    fontSize: 12,#}
{#                    color: '#fff'#}
{#                }#}
{#            }#}
{#        });#}
{#    });#}


{#    var chartDom = document.getElementById('main1');#}
{#    var myChart = echarts.init(chartDom);#}
{#    var option;#}
{##}
{#    let xAxisData = ['1号', '2号', '3号', '4号'];#}
{#    let data1 = [1, 2, 3, 4];#}
{#    let data2 = [-1, -2, -8, -4];#}
{#    var emphasisStyle = {#}
{#        itemStyle: {#}
{#            shadowBlur: 10,#}
{#            shadowColor: 'rgba(0,0,0,0.3)'#}
{#        }#}
{#    };#}
{#    option = {#}
{#        legend: {#}
{#            data: ['入库零件个数', '出库零件个数'],#}
{#            left: '10%'#}
{#        },#}
{#        brush: {#}
{#            toolbox: ['rect', 'polygon'],#}
{#            xAxisIndex: 0#}
{#        },#}
{#        toolbox: {#}
{#            feature: {#}
{#                magicType: {#}
{#                    type: ['stack']#}
{#                },#}
{#                dataView: {}#}
{#            }#}
{#        },#}
{#        tooltip: {},#}
{#        xAxis: {#}
{#            data: xAxisData,#}
{#            name: '日期',#}
{#            axisLine: {onZero: true},#}
{#            splitLine: {show: false},#}
{#            splitArea: {show: false}#}
{#        },#}
{#        yAxis: {#}
{#            name: '个数',#}
{#            axisPointer: {#}
{#                type: 'line'#}
{#            },#}
{#            type: 'time',#}
{#            max: '1955-12-31',#}
{#            min: '1905-01-01',#}
{#            axisLine: {#}
{#                symbolSize: [10, 15]#}
{#            },#}
{#            axisTick: {#}
{#                interval: 12#}
{#            },#}
{#            splitLine: {#}
{#                show: true,#}
{#            },#}
{#            inverse: true,#}
{#            axisPointer: {#}
{#                snap: true,#}
{#                // type:'line'#}
{#            }#}
{#        },#}
{#        grid: {#}
{#            bottom: 100#}
{#        },#}
{#        series: [#}
{#            {#}
{#                name: '入库零件个数',#}
{#                type: 'bar',#}
{#                stack: 'one',#}
{#                emphasis: emphasisStyle,#}
{#                data: data1#}
{#            },#}
{#            {#}
{#                name: '出库零件个数',#}
{#                type: 'bar',#}
{#                stack: 'one',#}
{#                emphasis: emphasisStyle,#}
{#                data: data2#}
{#            }#}
{#        ]#}
{#    };#}
{#    myChart.on('brushSelected', function (params) {#}
{#        var brushed = [];#}
{#        var brushComponent = params.batch[0];#}
{#        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {#}
{#            var rawIndices = brushComponent.selected[sIdx].dataIndex;#}
{#            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));#}
{#        }#}
{#        myChart.setOption({#}
{#            title: {#}
{#                backgroundColor: '#333',#}
{#                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),#}
{#                bottom: 0,#}
{#                right: '10%',#}
{#                width: 100,#}
{#                textStyle: {#}
{#                    fontSize: 12,#}
{#                    color: '#fff'#}
{#                }#}
{#            }#}
{#        });#}
{#    });#}
{#    option && myChart.setOption(option);#}
